<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 19:00:58
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-16 23:25:41
 * @Description: 个人中心
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/user_center.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css      ">
    <title>个人中心</title>
</head>

<body>
    <div class="user-header">
        <div class="card">
            <div class="avatar">
                <img src="../img/user/avatar.png" id="avatar" alt="">
            </div>
            <div id="username" class="user-name"></div>
            <div class="text">
                <div class="star">
                    <div id="my-star" class="num">0</div>
                    <div class="title">我的收藏</div>
                </div>
                <div class="brand">
                    <div id="my-follow" class="num">0</div>
                    <div class="title">关注品牌</div>
                </div>

            </div>
        </div>
    </div>

    <div class="modular">
        <div class="headline">
            <span>我的订单</span>
            <a href="./order_list.html">全部订单<i class="fa fa-angle-right" aria-hidden="true"></i></a>
        </div>
        <div class="content-list">
            <a href="./order_list.html?status=0"><img src="../img/user-center/待付款.png" alt="">
                <span>待付款</span>
                <span id="no-pay-num" class="point">1</span>
            </a>

            <a href="./order_list.html?status=3"><img src="../img/user-center/待发货1.png" alt="">
                <span>代发货</span>
                <span id="no-send-num" class="point">1</span>
            </a>
            <a href="./order_list.html?status=4"><img src="../img/user-center/待收货1.png" alt="">
                <span>待收货</span>
                <span id="no-receive-num" class="point">1</span>
            </a>
            <a href="./order_list.html?status=5"><img src="../img/user-center/待评价 .png" alt="">
                <span>待评价</span>
                <span id="no-evaluate-num" class="point">1</span>
            </a>
            <a href="#"><img src="../img/user-center/售后.png" alt=""><span>售后</span></a>
        </div>
    </div>

    <div class="modular">
        <div class="headline">我的资产</div>
        <div class="content-list">
            <a href="#"><img src="../img/user-center/优惠券.png" alt=""><span>优惠卷</span></a>
            <a href="#"><img src="../img/user-center/钱包.png" alt=""><span>钱包</span></a>
            <a href="#"><img src="../img/user-center/美元.png" alt=""><span>D币</span></a>
            <a href="#"><img src="../img/user-center/红包.png" alt=""><span>红包</span></a>
        </div>
    </div>

    <div class="modular">
        <div class="headline">工具</div>
        <div id="tools-list" class="content-list">
            <a href="#"><img src="../img/user-center/会员中心1.png" alt=""><span>会员中心</span></a>
            <a href="./shipping_address.html"><img src="../img/user-center/收货地址.png" alt=""><span>收货地址</span></a>
            <a href="#"><img src="../img/user-center/客服1.png" alt=""><span>售后&客服</span></a>
            <a href="#"><img src="../img/user-center/T设置.png" alt=""><span>设置</span></a>
            <a href="#"><img src="../img/user-center/商家入驻.png" alt=""><span>入住合作</span></a>
            <a href="#"><img src="../img/user-center/反馈.png" alt=""><span>反馈&投诉</span></a>
            <a href="#"><img src="../img/user-center/报告.png" alt=""><span>商品报告</span></a>
            <a href="#"><img src="../img/user-center/关于我们.png" alt=""><span>关于我们</span></a>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="./index.html">
            <img src="../img/user-center/首页2.png" alt="">
            <span>首页</span>
        </a>
        <a href="./selection.html">
            <img src="../img/user-center/钻石 (1).png" alt="">
            <span>优选</span>
        </a>
        <a href="./classify.html">
            <img src="../img/user-center/分类2.png" alt="">
            <span>分类</span>
        </a>
        <a href="./cart.html">
            <img src="../img/user-center/购物车2.png" alt="">
            <span>购物车</span>
        </a>
        <a class="active" href="./personal_center.html">
            <img src="../img/user-center/我的2.png" alt="">
            <span>我的</span>
        </a>
    </nav>
    <!-- 提示 tip -->
    <span id="tip" class="tip"></span>
</body>


<script src="../js/axios.min.js"></script>
<script src="../js/axios_config.js"></script>
<script src="../js/api.js"></script>
<script>
    let oUsername = document.querySelector('#username')
    let oavatar = document.querySelector('#avatar')
    let oStar = document.querySelector('#my-star')
    let oFollow = document.querySelector('#my-follow')
    let oPayPoint = document.querySelector('#no-pay-num')
    let oSendPoint = document.querySelector('#no-send-num')
    let oReceivedPoint = document.querySelector('#no-receive-num')
    let oEvaluatePoint = document.querySelector('#no-evaluate-num')

    let user = null
    let noPayOrder = []
    let noSendOrder = []
    let noReceiveOrder = []
    let noEvaluateOrder = []
    let collectionList = []
    let orderPageIndex = 1
    let collectionPageIndex = 1

    init()

    async function init() {
        user = await getUserInfo()
        console.log(user);

        if (user) {
            oUsername.innerText = user.username
            oavatar.src = user.avatar
        } else {
            openTip('请登录，3秒后自动进入登陆界面...')
            setTimeout(() => {
                location.replace('./login.html')
            }, 3000)
            return
        }

        // 获取待付款
        await getAllOrderList(0)
        if (noPayOrder.length != 0) {
            oPayPoint.style.display = 'block'
            oPayPoint.innerText = noPayOrder.length
        }

        // 获取待发货
        await getAllOrderList(3)
        if (noSendOrder.length != 0) {
            noSendOrder.style.display = 'block'
            noSendOrder.innerText = noSendOrder.length
        }

        // 获取待收货
        await getAllOrderList(4)
        if (noReceiveOrder.length != 0) {
            noReceiveOrder.style.display = 'block';
            noReceiveOrder.innerText = noReceiveOrder.length;
        }

        // 获取待评价
        await getAllOrderList(5)
        if (noEvaluateOrder.length != 0) {
            noEvaluateOrder.style.display = 'block';
            noEvaluateOrder.innerText = noEvaluateOrder.length;
        }

        // 获取全部的收藏列表
        await getCollectionList()
        oStar.innerText = collectionList.length

    }

    async function getCollectionList() {
        await axios.get('/collection/list', {
            params: {
                pagesize: 4,
                pageindex: collectionPageIndex,
            }
        }).then(async resp => {
            if (resp.status) {
                if (resp.data.length === 0) return
                collectionList = collectionList.concat(resp.data);
                collectionPageIndex++;
                await getCollectionList();
            }
        })
        return
    }

    /**
     * @description: 获取订单列表
     * @return {*}
     * @param {*} status Number	订单状态:0-待付款，3-待发货，4-待收货，5-待评价，all-所有状态;
     *                          允许值: 0, 3, 4, 5, all
     */
    async function getAllOrderList(status) {
        await axios.get('/order/list', {
            params: {
                pageSize: 4,
                pageIndex: orderPageIndex,
                status: status,
            }
        }).then(async(resp) => {
            if (resp.status) {
                if (resp.data.length === 0) return
                switch (status) {
                    case 0:
                        noPayOrder = noPayOrder.concat(resp.data);
                        break;
                    case 3:
                        noSendOrder = noSendOrder.concat(resp.data);
                        break;
                    case 4:
                        noReceiveOrder = noReceiveOrder.concat(resp.data);
                        break;
                    case 5:
                        noEvaluateOrder = noEvaluateOrder.concat(resp.data);
                        break;
                    default:
                        break;
                }
                orderPageIndex++;
                await getAllOrderList(status);
            }
        })
        orderPageIndex = 1
        return
    }

    /**
     * @description: 获取个人资料
     * @return {*} 个人资料
     */
    async function getUserInfo() {
        let result = null
        await axios.get('/user/info').then(resp => {
            if (resp.status) {
                result = resp.data
            }
        })
        return result
    }
</script>

</html>